<template>
  <div class="calendar-view">
    <div class="top_box">
      <div class="pre">
        <i class="el-icon-arrow-left changeHand" @click="perv"></i>
        <div class="content">{{ currentYear }}年{{ currentMount + 1 }}月</div>
      </div>
      <div class="next changeHand" @click="next">
        <i class="el-icon-arrow-right"></i>
      </div>
    </div>
    <div class="week">
      <ul>
        <li v-for="(item, index) in week" :key="index">{{ item }}</li>
      </ul>
    </div>
    <div class="daylist">
      <ul>
        <!-- 上个月剩余多少天 -->
        <li v-for="(value, k) in prevMountDays" :key="'A' + k"></li>
        <!-- 当月的天数 -->
        <li
          v-for="(v, i) in currentMountDay"
          :class="[
            currentDay < v ? 'active' : '',
            currentSelectDay == v ? 'selectDay' : '',
          ]"
          :key="'B' + i"
          class="changeHand currentMountDay"
          @click="handleClick(v)"
        >
          {{ v }}
          <span v-show="currentDay < v">￥230</span>
        </li>
      </ul>
    </div>
  </div>
</template>
<script>
export default {
  props: {},
  components: {},
  data() {
    return {
      week: ["日", "一", "二", "三", "四", "五", "六"],
      // 当前的年份
      currentYear: new Date().getFullYear(),
      // 当前的月份
      currentMount: new Date().getMonth(),
      // 当前的日
      currentDay: new Date().getDate(),
      //   当前选中的天
      currentSelectDay: new Date().getDate(),
    };
  },
  methods: {
    perv() {
      if (this.currentMount == 0) {
        this.currentYear--;
        this.currentMount = 11;
      } else {
        this.currentMount--;
      }
    },
    next() {
      if (this.currentMount == 11) {
        this.currentYear++;
        this.currentMount = 0;
      } else {
        this.currentMount++;
      }
    },
    // 点击某一天
    handleClick(day) {
      this.currentSelectDay = day;
      let selectDay = `${this.currentYear}-${this.currentMount + 1}-${day}`;
      this.$emit("select", selectDay);
    },
  },
  mounted() {},
  watch: {},
  computed: {
    // 当前月有多少天
    currentMountDay() {
      return new Date(this.currentYear, this.currentMount + 1, 0).getDate();
    },
    // 上个月剩余多少天
    prevMountDays() {
      return new Date(this.currentYear, this.currentMount, 1).getDay();
    },
  },
  filters: {},
};
</script>
<style lang="scss" scoped>
.calendar-view {
  margin-top: 20px;
  .top_box {
    display: flex;
    align-items: center;
    height: 20px;
    justify-content: space-between;

    .pre {
      display: flex;
      align-items: center;
      .content {
        margin-left: 30px;
      }
      i {
        font-size: 20px;
      }
    }
    .next {
      i {
        font-size: 20px;
      }
    }
  }
  .week {
    margin-top: 10px;
    height: 40px;
    ul {
      height: 100%;
      display: flex;
      justify-content: space-between;

      background-color: #ccc;
      li {
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        flex: 1;
        color: #333;
      }
    }
  }
  .daylist {
    border: 1px solid #ddd;
    ul {
      display: flex;
      align-items: center;
      flex-wrap: wrap;
      li {
        position: relative;
        width: 13.2%;
        height: 45px;
        line-height: 35px;
        margin: 2px;
        text-align: center;
        &.currentMountDay {
          border: 1px solid #ddd;
        }

        & > span {
          font-size: 12px;
          position: absolute;
          left: 5px;
          bottom: -10px;
          color: #ff6f00;
        }

        &.selectDay {
          background-color: #0078d7;
          padding: 6px;
          border: 1px solid red;
          color: #fff;
        }
      }
    }
  }
}
</style>
